import React, { useState } from 'react';
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Cascader } from 'antd';
import styles from './index.module.scss'
import { formatTime, getValueFromEvent } from '@/utils/util';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

const layout = {
    // labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};


const { TextArea } = Input;

const ModifyForm = (props: any) => {
    const [form] = Form.useForm();
    const { formList, initialValues, children, onSubmit, onCancel } = props
    const onFinish = (values: any) => {
        console.log('values', values)
        Object.keys(values).forEach(key => {
            const value = values[key];

            //如果是moment类型就进行转换
            if (value && value._isAMomentObject) {
                values[key] = formatTime(value.toDate())
            }

            //如果是moment数组类型
            if (value && value.length == 2 && value[0]._isAMomentObject) {
                values[key] = [
                    value[0].format('YYYY-MM-DD 00:00:00'),
                    value[1].format('YYYY-MM-DD 23:59:59'),
                ]
            }
        });

        form.resetFields() //清空数据
        onSubmit(values)
    }

    const cancelEdit = () => {
        form.resetFields() //清空数据
        onCancel()
    }

    const ruleConfig = (item: any) => {
        if (item.type == 'dataPicker') {
            return {
                rules: [{ type: 'object' as const, required: true, message: '请选择' + item.label }],
            }
        } else if (item.type === 'dataPickerRange') {
            return {
                rules: [{ type: 'array' as const, required: true, message: '请选择' + item.label }],
            }
        } else if (item.type === 'select') {
            return {
                rules: [{ required: item.required, message: '请选择' + item.label }],
            }
        }
        else {
            return {
                rules: [{ required: item.required, message: '请输入' + item.label }, {
                    validator: item.validator
                }]
            }
        }
    }

    // 输入框
    const getInput = (item: any) => {
        if (item.slot != undefined) {
            return props.children[item.slot]
        }
        else {
            if (item.type === 'input') {
                return (
                    <Input maxLength={item.maxLength} placeholder={'请填写' + item.label} />
                )
            } else if (item.type === 'select') {
                return (
                    <Select
                        placeholder={'请选择' + item.label}
                        defaultValue={item.defaultValue}
                        style={{ width: 200 }}
                        options={item.options}
                    >
                    </Select>
                )
            } else if (item.type === 'dataPicker') {
                {/* 传入locale属性 控制中文显示*/ }
                return (
                    <DatePicker style={{ width: '200px' }} locale={locale} disabledDate={item.disabledDate}></DatePicker>
                )
            } else if (item.type === 'dataPickerRange') {
                {/* 传入locale属性 控制中文显示*/ }
                return (
                    <RangePicker
                        style={{ width: '400px' }}
                        locale={locale}
                        disabledDate={item.disabledDate}
                    />
                )
            } else if (item.type === 'textArea') {
                return (
                    <TextArea showCount rows={4} placeholder={'请填写' + item.label} maxLength={item.maxLength} />
                )
            }
        }

    }

    return (
        <div className={styles.wrapper}>
            {/* preserve={false}：每次关闭弹框的时候，都销毁form组件 */}
            <Form
                preserve={false}
                layout="inline" {...layout}
                form={form}
                autoComplete="off"
                initialValues={initialValues}
                onFinish={onFinish}
            >
                <Row gutter={16}>
                    {
                        formList.map((item: any, index: any) => (
                            <Col span={item.span} key={index}>
                                <Form.Item
                                    name={item.name}
                                    key={item.name}
                                    label={item.label}
                                    style={{ height: '50px' }}
                                    // getValueFromEvent={getValueFromEvent}
                                    {...ruleConfig(item)}
                                >
                                    {getInput(item)}
                                </Form.Item>
                            </Col>
                        ))
                    }
                </Row>
                {children == undefined ? '' : children.default}
                <div className='formBtn'>
                    <Button onClick={cancelEdit} style={{ marginRight: '20px' }}>取消</Button>
                    <Button type="primary" htmlType="submit">确认</Button>
                </div>
            </Form >


        </div >
    )
}

export default ModifyForm
